<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.png" />
    </div>
    <div class="btn">
      <button class="mobile" @click="login('/login/phone')">手机号登录</button>
      <button class="register" @click="login('/login/register')">注册</button>
    </div>
    <div class="clause">
      <van-checkbox v-model="checked" icon-size="12px" checked-color="#f8d5d2"
        >同意</van-checkbox
      >
      <a
        class="service"
        href="http://st.music.163.com/official-terms/service"
        target="_blank"
        >《服务条款》</a
      ><a
        class="privacy"
        href="http://st.music.163.com/official-terms/privacy"
        target="_blank"
        >《隐私政策》</a
      ><a
        class="children"
        href="https://st.music.163.com/official-terms/children"
        target="_blank"
        >《儿童隐私政策》</a
      >
    </div>
    <ul class="type">
      <li>
        <img src="../assets/QQ.png" />
      </li>
      <li>
        <img src="../assets/wb.png" />
      </li>
      <li>
        <img src="../assets/wy.png" @click="login('/login/phone?type=email')" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
    };
  },
  methods: {
    login(url) {
      if (!this.checked) {
        this.$toast("请先勾选同意《服务条款》、《隐私条款》、《儿童隐私条款》");
        return;
      }
      this.$router.push(url);
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  position: relative;
  background-color: #db2c1f;
  height: 100vh;
  padding: 70px 0 30px;
  width: 100%;
  z-index: 99;
  .logo {
    position: relative;
    height: 314px;
    line-height: 314px;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 75px;
      height: 75px;
    }
  }
  .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 110px;
    .mobile {
      width: 280px;
      height: 46px;
      border-radius: 46px;
      font-size: 16px;
      background-color: #fff;
      color: #ff3a3a;
      border: 0;
    }
    .register {
      width: 280px;
      height: 46px;
      border-radius: 46px;
      font-size: 16px;
      background: #db2c1f;
      color: #fff;
      border: 1px solid #fff;
    }
  }
  .clause {
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    font-size: 9px;
    color: hsla(0, 0%, 100%, 0.6);
    /deep/ .van-checkbox {
      margin-top: 3px;
    }
    /deep/ .van-checkbox__icon--checked .van-icon {
      color: #db2c1f;
    }
    /deep/ .van-icon-success:before {
      position: absolute;
      top: -2px;
      left: 0px;
    }
    /deep/ .van-checkbox__label {
      color: hsla(0, 0%, 100%, 0.6);
    }
    a {
      color: #fff;
    }
  }
  .type {
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 30px;
    padding: 0 47px;
    display: flex;
    li {
      flex-direction: column;
      align-items: center;
      min-width: 50px;
      font-size: 12px;
      line-height: 17px;
      img {
        width: 36px;
        height: 36px;
      }
    }
  }
}
</style>
